<template>
    <div class="app-container">
        <el-descriptions :model="userInfo" :column="1" border>
            <el-descriptions-item label="头像" label-class-name="my-label" content-class-name="my-content">
                <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-descriptions-item>
            <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
                {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
                <el-input v-model="userInfo.nickName" placeholder="请输入昵称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                <el-input v-model="userInfo.mobile" placeholder="请输入手机号"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱" label-class-name="my-label" content-class-name="my-content">
                <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input></el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-select v-model="userInfo.gender" placeholder="请选择性别">
                    <el-option v-for="item in genders" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="角色">
                <div v-for="role in userInfo.roles">
                    <el-tag size="mini" type="success">{{ role.name }}</el-tag>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <el-button type="success" style="margin-top: 10px;float: right;" @click="update">保存</el-button>
    </div>
</template>

<script>
import { getByCurrentUser, updateUserById } from '@/api/system.js'
export default {
    data() {
        return {
            genders: [
                { value: "1", label: "男" },
                { value: "0", label: "女" },
            ],
            uploadAction: "/api/file/upload",
            imageUrl: '',
            uploadId: '',
            userInfo: {}
        }
    },
    created() {
        this.initUserInfo()
    },
    methods: {
        initUserInfo() {
            getByCurrentUser().then(res => {
                if (res.data.code == 200) {
                    this.userInfo = res.data.data
                    this.imageUrl = res.data.data.file.path
                }
            })
        },
        handleAvatarSuccess(res, file) {
            this.uploadId = res.data.id
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        update() {
            let senddata = {
                ...this.userInfo,
                avatar: this.uploadId
            }
            updateUserById(senddata).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("修改成功")
                    this.dialogVisibleUpdate = false
                    this.initTableData();
                }
            })
        }
    }
}

</script>

<style scoped>
.avatar-uploader {
    height: 102px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>